<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心</title>
    <link rel="stylesheet" th:href="@{/css/global.css}">
    <link rel="stylesheet" th:href="@{/css/user/style.css}">
    <link rel="stylesheet" th:href="@{/css/register/style.css}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body class="light-theme">
<div class="theme-toggle">
    <i class="fas fa-moon"></i>
    <label class="switch">
        <input type="checkbox" id="themeSwitch">
        <span class="slider round"></span>
    </label>
    <i class="fas fa-sun"></i>
</div>

<div class="profile-container">
    <!-- 侧边导航 -->
    <nav class="profile-sidebar">
        <div class="user-card">
            <div class="avatar-upload">
                <img th:src="@{/img/avatar.png}" alt="头像" class="user-avatar" id="avatarPreview">
                <div class="upload-overlay">
                    <i class="fas fa-camera"></i>
                </div>
            </div>
            <h2 class="user-nickname" id="username"></h2>
            <p class="user-id" id="userId"></p>
        </div>
        <ul class="sidebar-menu">
            <li class="active"><a href="#basic-info"><i class="fas fa-user"></i> 基本信息</a></li>
            <li><a href="#security"><i class="fas fa-shield-alt"></i> 账号安全</a></li>
            <li><a href="#certification"><i class="fas fa-certificate"></i> 教师认证</a></li>
        </ul>
        <button onclick="logout()">退出登录</button>
    </nav>

    <!-- 主内容区 -->
    <main class="profile-content">
        <!-- 基本信息模块 -->
        <section id="basic-info" class="info-section active">
            <h2><i class="fas fa-id-card"></i> 基本信息</h2>
            <form class="profile-form">
                <div class="form-group dual-column">
                    <div class="input-group">
                        <label>昵称</label>
                        <div class="input-with-action">
                            <label>
                                <input type="text" value="" id="nickname" readonly>
                            </label>
                            <button type="button" class="edit-btn" id="editNicknameBtn"
                                    onclick="updateUserInfo('nickname', 'editNicknameBtn')">修改
                            </button>
                        </div>
                    </div>
                    <div class="input-group">
                        <label>性别</label>
                        <div class="gender-select">
                            <label>
                                <input type="radio" name="gender" value="1">
                                <span class="gender-option">♂ 男</span>
                            </label>
                            <label>
                                <input type="radio" name="gender" value="2">
                                <span class="gender-option">♀ 女</span>
                            </label>
                            <label>
                                <input type="radio" name="gender" value="3">
                                <span class="gender-option">未 知</span>
                            </label>
                        </div>
                    </div>
                </div>
                <div class="form-group dual-column">
                    <div class="input-group">
                        <label>真实姓名</label>
                        <div class="input-with-action">
                            <label for="realName"></label><input type="text" id="realName" readonly>
                        </div>
                    </div>
                    <div class="input-group">
                        <label>用户类型</label>
                        <div class="input-with-action">
                            <label for="userType"></label><input type="text" id="userType" readonly>
                        </div>
                    </div>
                </div>
                <div class="form-group dual-column">
                    <div class="input-group">
                        <label>手机号码</label>
                        <div class="input-with-action">
                            <label>
                                <input type="tel" value="" id="phone" readonly>
                            </label>
                            <button type="button" class="edit-btn" id="editPhoneBtn"
                                    onclick="updateUserInfo('phone', 'editPhoneBtn')">更换
                            </button>
                        </div>
                    </div>
                    <div class="input-group">
                        <label>认证邮箱</label>
                        <div class="input-with-action">
                            <label>
                                <input type="tel" value="" id="email" readonly>
                            </label>
                            <button type="button" class="edit-btn" id="editEmailBtn"
                                    onclick="updateUserInfo('email', 'editEmailBtn')">更换
                            </button>
                        </div>
                    </div>
                </div>
                <button class="floating-submit" onclick="updateInfo()">
                    <i class="fas fa-paper-plane"></i>
                    提交修改
                </button>
            </form>
        </section>

        <!-- 账号安全模块 -->
        <!-- 账号安全模块 -->
        <section id="security" class="info-section">
            <h2><i class="fas fa-lock"></i> 安全设置</h2>
            <div class="security-list">
                <div class="security-item">
                    <div class="password-form">
                        <!-- 原密码 -->
                        <div class="form-group">
                            <label>原密码</label>
                            <div class="input-with-icon">
                                <i class="fas fa-lock"></i>
                                <label for="oldPassword"></label><input type="password"
                                                                        id="oldPassword"
                                                                        name="oldPassword"
                                                                        placeholder="请输入当前密码"
                                                                        required>
                            </div>
                            <span class="error-message"></span>
                        </div>

                        <!-- 新密码 -->
                        <div class="form-group">
                            <label>新密码</label>
                            <div class="input-with-icon">
                                <i class="fas fa-key"></i>
                                <label for="newPassword"></label><input type="password"
                                                                        id="newPassword"
                                                                        name="newPassword"
                                                                        placeholder="6-20位新密码"
                                                                        required>
                            </div>
                            <span class="error-message"></span>
                        </div>

                        <!-- 确认密码 -->
                        <div class="form-group">
                            <label>确认新密码</label>
                            <div class="input-with-icon">
                                <i class="fas fa-check-double"></i>
                                <label for="confirmNewPassword"></label><input type="password"
                                                                               id="confirmNewPassword"
                                                                               name="confirmNewPassword"
                                                                               placeholder="再次输入新密码"
                                                                               required>
                            </div>
                            <span class="error-message"></span>
                        </div>

                        <!-- 提交按钮 -->
                        <div class="form-footer">
                            <button type="submit"
                                    class="register-btn"
                                    onclick="changePassword()">
                                <i class="fas fa-sync-alt"></i>
                                确认修改密码
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 教师认证模块 -->
        <section id="certification" class="info-section">
            <h2><i class="fas fa-chalkboard-teacher"></i> 教师认证</h2>
            <div class="certification-status">
                <i class="fas fa-clock"></i>
                <p>尚未提交认证材料</p>
                <button type="button" class="certify-btn">开始认证</button>
            </div>
        </section>
    </main>
</div>

<div id="customAlert" class="custom-alert">
    <div class="alert-content">
        <div class="alert-icon"></div>
        <div class="alert-message"></div>
        <button class="alert-close">&times;</button>
    </div>
</div>
<script th:src="@{/js/global.js}"></script>
<script th:src="@{/js/profile-script.js}"></script>
<script th:src="@{/js/profile-style.js}"></script>
</body>
</html>
